$(function () {//页面加载完成执行里面的代码
    //定义layui的类；和Java的变量实例化，实例化对象 new  Object();
    layui.use('form', function () {
        var form = layui.form;//得到form表单
        //弹出提示框
        // layer.msg('玩命卖萌中', function(){
        //   //关闭后的操作
        //   });
        // 通过得到id命名username的div对象
        // var oDiv = document.getElementById("username");
        // oDiv.onclick = function(){
        //     aa();
        // };
        //自定义验证规则
        form.verify({
            username: function (value) {
                if (value.length < 5) {
                    return '昵称至少得5个字符啊';
                }
            },
            pass: [/(.+){6,12}$/, '密码必须6到12位'],
            repass: function (value) {
                if ($('#L_pass').val() != $('#L_repass').val()) {
                    return '两次密码不一致';
                }
            }
        });
        //监听提交
        // on代表添加一个事件,div.on("click",function(){})
        //submit 表示提交数据到后台
        //'submit(login)' 得到页面所有type为submit的按钮，只需要login的按钮（lay-filter="login"）
        form.on('submit(login)', function (data) {
            // alert(888)
            // data默认为对象，默认为json对象，
            // js的数据类型？
            // 字符串  数组  对象  布尔  数字
            // var age = 18;//数字
            // var name = "supeng";//字符串
            // var person = {age: 18, name: "aaa"};//对象
            // var array = [person, dog, {}, 11, "afsdf", true];//数组
            // var isMan = true;  //布尔
            // javascript 是一门弱语言，兼容性很高
            //取对象里面的值  person.age   person["age"]
            // console.log(data);
            //data.field//field 属性  字段（key，value）
            //JSON.stringify(data.field) 将data对象强制转换为字符串
            // form 表单里面的值：key值对应表单的name属性，value对应表单里面的value（输入的字符）
            // layer.msg(JSON.stringify(data.field), function () {
            //     // location.href='index.html'//跳转页面
            // });
            //return false; 如果是submit，点击后会刷新页面，返回false，则为普通按钮 button
            //将得到的数据传递到Java后台？1.需要得到数据，2.需要后台
            //前端和后端进行数据交互有两种情况1.直接用form表单交互，2.用ajax交互
            // 用Ajax不要用原生的Ajax，因为传递数据全是字符串，如果需要直接用，则必须转换为对象
            //所以我们直接用jQuery的ajax进行操作
            // $.post("/login", data.field, function (data) {//data对应的是后台返回给前端的数据
            //     console.log(data);
            // });
            // $.get("/login",data.field,function (data) {
            //     console.log(data);
            // });
            console.log(data.field)
            var username = data.field.username;
            $.ajax({
                url: '/login',//对应webservlet的注解
                data: data.field,//传递到后台的数据
                type: "post",//对应后台的方法
                dataType: 'json',//对应后台传递到前端的数据格式
                success: function (data) {//后端传递到前端的数据
                    console.log(data);
                    if (data.msg == "error-code") {
                        layer.msg('验证码错误，请重新输入');
                    }
                    if (data.msg == "error") {
                        layer.msg('用户名或者密码错误，请重新输入');
                    }
                    if (data.msg == "success") {
                        layer.msg('即将跳转到后台管理页面', {
                            icon: 1
                        }, function () {
                            sessionStorage.setItem("username", username);//存在内存
                            // localStorage.setItem("username", username);//存在文件
                            window.open("/html/index.html");
                        });
                        //跳转页面两种方式 1. window.location.href="index.html";
                        //    2.window.open("index.html");

                    }
                }
            });
            return false;
        });
    });

});
//JS的方法 function name（）{}
//function  定义方法
//name  方法名
//（） 带参数
//{} 执行体
function changeCode(obj) {
    //拿到当前（验证码）这个对象
//    1.通过id拿值
    //原生js拿去对象
    // var elementById = document.getElementById("code");
    // console.log(elementById);
    //浏览器默认情况下如果访问的地址是一样的，直接取缓存数据，不进行任何操纵
    // js 随机数

    //    2.jquery 拿到对象
    // var elementById = $("#code");
    // console.log(elementById);
    // 原生js不能和jquery混用
    // elementById.src = "/code?random=" + Math.random();
    // elementById.attr("src", "/code?random=" + Math.random());
//3.用this
    $(obj).attr("src", "/code?random=" + Math.random());


}